<template>
  <div class="app-container home">
        <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          1.本工具不会收集储存任何敏感及店铺产品等信息上传至服务器,所有敏感数据均在储存在用户本地!
          <br />
          2.本工具未进行任何数据收集,亦没有利用任何漏洞进行恶意爬取数据.
          <br />          
          3.本工具仅供个人学习研究使用,严禁用于商业用途,其他未在此页进行说明的事项/条款阅读<a href="https://www.ali404.com/agreement">《用户协议》</a>、<a href="https://www.ali404.com/disclaimer">《免责协议
            》</a>、<a href="https://www.ali404.com/privacy-policy">《隐私政策》</a>,但您访问使用本工具时将视为您同意并知晓相关事项/协议/政策
          <br />
          4.如本工具有侵犯到任何人/单位的权益,请邮件致信,我们会在查看到邮件的24小时内进行屏蔽/删除等处理.
          <br />  
         </blockquote>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>外贸运营工具库</h2>
        <p>
          目前处于内测阶段,系统会陆续更新一些实用功能。
        </p>

        <p>
          <el-button size="mini" :type="btntype" @click="actions" >{{actionstext}}</el-button>
          <el-button size="mini" type="warning"  @click="handleAdd"  v-hasPermi="['alibaba:cookie']">{{ali}}</el-button>          
          <el-button
            size="mini"
            icon="el-icon-s-home"
            plain
            @click="goTarget('https://www.ali404.com/document/tools-plus')"
            >使用文档</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-cloudy"
            plain
            @click="goTarget('https://txc.qq.com/dashboard/products/340306')"
            >产品反馈</el-button>
           <el-button size="mini" type="danger"  @click="url">{{ctitle}}</el-button> 


        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>特点</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>云端访问</h4>
            <ul>
              <li>不限设备</li>
              <li>不限地点</li>
              <li>随手访问</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>本地运算</h4>
            <ul>
              <li>信息安全</li>
              <li>本地存储</li>
              <li>不经第三方</li>
              <li>隐私安全</li>
              <li>内网部署</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
                href="https://www.ali404.com"
                target="_blank"
                >https://www.ali404.com</el-link
              >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 微信：<a
                href="javascript:;"
                >/ alidata233</a
              >
            </p>
            <p>
              <i class="el-icon-money"></i> 微信公众号：<a
                href="javascript:;"
                class="微信公众号"
                >/ 运营有数</a>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion>
            <el-collapse-item title="v1.0.7 - 2021.07.26">
              <ol>
                <li>完善一部分批量询盘查询信息</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.6 - 2021.07.26">
              <ol>
                <li>添加批量产品询盘功能</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.5 - 2021.07.21">
              <ol>
                <li>修复一些问题</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.4 - 2021.07.19">
              <ol>
                <li>修复一些问题</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.3 - 2021.7.18">
              <ol>
                <li>修复一些问题</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.2 - 2021.7.17">
              <ol>
                <li>修复一些问题</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.1 - 2021.07.17">
              <ol>
                <li>修复一些问题</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.0 - 2021.06.27">
              <ol>
                <li>测试版发布</li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>微信交流群</span>
          </div>
          <div class="body">
            <img
              :src="this.wxq"
              referrerpolicy="no-referrer"
              width="50%"/>
              <p>如失效,请加微信 <b>alidata233</b> 发送 <b>内测plus</b> 即可</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="填写" prop="webcookie">
          <el-input v-model="form.webcookie" type="textarea" placeholder="请填写完整,不会填写的 请查看使用文档" />
        </el-form-item>
        <label><a href="https://www.ali404.com/document/216.html" target="_blank">Cookie获取教程</a></label>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { apiaction ,getApi,addConfig} from "@/api/unicorn";
import Cookies from "js-cookie";

export default {
  name: "index",
  data() {
    return {
      title: "",
      open: false,
      uid:"未登录",
      ali:"登录Alibaba",
      actionstext:"激活客户端",
      btntype:"info",
      wxq:"",
      user: {},
      form: {},
      rules: {
        webcookie: [
          { required: true, message: "不能为空", trigger: "blur" }
        ]
      },
      version: "",
      cversion:"",
      ctitle:"本地客户端"
    };
  },
  created() {
     this.getUser();
     this.getConfigKey("wxq").then(response => {
        this.wxq = response.msg; 
      });
  
      this.getConfigKey("version").then(response => {
        this.cversion = response.msg; 
      });
      
  },
  methods: {
    handleAdd() {
      this.open = true;
      this.title = "Cookie导入";
   },
   // 1、WebSocket连接状态检测：
    
  url() {
       if(this.version<this.cversion){
          this.getConfigKey("unicornurl").then(response => {
                window.open(response.msg+"?id="+this.user.userId+"&v="+this.version);
          });
        }else{
            this.msgSuccess("无需更新");
            this.ctitle="无需更新"
        }
   },
  wx() {
     window.open("https://cdn.ali404.com/wp-content/uploads/2021/06/1623121341-0.jpg");
   },
   submitForm: function() {
      this.$refs["form"].validate(valid => {
           if (valid) {
            addConfig(this.form).then(response => {
              if(response.code==500){
                this.ali="登录Alibaba";
                this.msgError(response.msg);
              }
                this.msgSuccess(response.msg);
                this.ali=response.name;
              this.open = false;
            });

           }
      });
    },
    cancel() {
      this.open = false;
    }, 
    getUser() {
      getApi().then(response => {
        this.user = response;
        this.actions();
      });
    },
    actions() {
   
           apiaction(this.user).then(response => {
           if(response.data>=this.version){
                  this.version=response.data
                  this.actionstext="已激活客户端"
                  this.btntype="primary"
                  Cookies.set("apiaction","1")
              }else{
                      Cookies.set("apiaction","0")
                      this.btntype="info"
                      this.actionstext="待激活客户端"
              }
           
           })
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

